<template>
  <div>
    <div class="navbar">
      <van-icon class="navcross" name="arrow-left" @click="goBack" />
      <span class="nav-title">严选商城</span>
    </div>
    <div class="line"></div>
    <van-tabs v-model="activeName" class="tagName"  @click="getGoodsList()">
      <van-tab
        v-for="(item) in categoryList"
        :key="item.id"
        :title="item.name"
       
      ></van-tab>
      <div>
        <h2>{{name}}</h2>
        <p>{{fontDesc}}</p>
      </div>
    </van-tabs>
    <Product :goodsList="goodsList" />
    <BackTop />
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapGetters } from "vuex";
import BackTop from "../../components/BackTop.vue";
import Product from "../../components/ProGoods.vue";

export default {
  name: "channel",
  data() {
    return {
      activeName: '',
      categoryList: [],
      goodsList: [],
      name:'',
      fontDesc:''
    };
  },
  components: { BackTop, Product },
  methods: {
    /* async和await是等待异步请求执行完成之后再执行之后的代码  回到home页面 */
    async goBack() {
      await this.$router.push("/home");
    },
    // 进入商品详情
    goPro(id) {
      this.$router.push("/Productdetail/" + id);
    },
    getGoodsList() {
      this.goodsList = this.categoryList[this.activeName].goodsList;
      this.name = this.categoryList[this.activeName].name
    }
  },
  computed: {},
  mounted() {
    axios({
      url: "http://localhost:8080/api/getDB",
      method: "get",
    }).then(
      (res) => {
        this.categoryList = res.data.categoryList;
        let num = this.$route.params.id
        this.categoryList.forEach((item,index)=>{
          if(Number(item.id) == num){
            this.name = item.name
            this.goodsList = item.goodsList,
            this.activeName = index

          }
        })
      },
      (err) => {
        alert(err);
      }
    );
  },
};
</script>

<style scoped lang='less'>
.navbar {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  height: 0.45rem;
  line-height: 0.45rem;
}
.navcross {
  position: absolute;
  padding-left: 0.2rem;
  margin-top: 0.13rem;
  color: darkred;
  font-size: 0.2rem;
}
.nav-title {
  display: block;
  font-size: 0.18rem;
  text-align: center;
}
/* .title_desc {
  text-align: center;
  background: #fff;
  h2 {
    font-size: 18px;
    height: 50px;
    line-height: 50px;
  }
  p {
    height: 30px;
    line-height: 30px;
    color: #666;
  }
} */
.gname {
  font-size: 14px;
}
.price {
  color: #8b0000;
  font-size: 14px;
}
.line {
  width: 100%;
  height: 1px;
  background: #ccc;
}
h2 {
  text-align: center;
}

p {
  font-size: 18px;
  text-align: center;
  color: #666;
}
.tagName {
  font-size: 12px;
}
</style>
